<template>
  <div
    class="dock"
    :class="'dock-' + placement"
    @mouseenter="isShowDockBody(true)"
    @mouseleave="isShowDockBody(false)"
  >
    <transition :name="placement" v-on:after-leave="bodyLeave = true">
      <!--      如果时自动隐藏模式的话使用show来控制是否显示，如果不是自动隐藏则一直显示-->
      <div v-if="autoHide ? show : true" class="dock-body">
        <div class="app-item" @click="switchLauncher">
          <launcher-popover-menu :placement="popoverPlacement" v-slot:default="controller">
            <div
              class="app-icon-wrapper"
              @mouseenter.prevent="controller.showName()"
              @mouseleave="controller.closeName()"
              @contextmenu.stop.prevent="controller.showMenu()"
            >
              <!--              当停靠位置是左边和底部时显示这个-->
              <div class="active-drop" v-if="placement === 'left'"></div>
              <launcher-icon />
              <!--              当停靠位置时右边时显示这个-->
              <div class="active-drop" v-if="placement === 'bottom' || placement === 'right'"></div>
            </div>
          </launcher-popover-menu>
        </div>
        <div
          v-for="application in dockApplications"
          :key="application.id"
          class="app-item"
          @click="
            () => {
              application.open()
              closeLauncher()
            }
          "
        >
          <popover-menu
            :placement="popoverPlacement"
            :application="application"
            v-slot:default="controller"
          >
            <div
              class="app-icon-wrapper"
              @mouseenter.prevent="controller.showName()"
              @mouseleave="controller.closeName()"
              @contextmenu.stop.prevent="controller.showMenu()"
            >
              <!--              当停靠位置是左边和底部时显示这个-->
              <div
                class="active-drop"
                v-if="placement === 'left'"
                :class="{ 'active-drop-show': application.isOpened() }"
              ></div>
              <icon :path="application.info.icon" />
              <!--              当停靠位置时右边时显示这个-->
              <div
                class="active-drop"
                v-if="placement === 'bottom' || placement === 'right'"
                :class="{ 'active-drop-show': application.isOpened() }"
              ></div>
            </div>
          </popover-menu>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { useDockApplications, useDockStyle } from "@/components/desktop/dock"
import Icon from "../../applications/icon/Icon.vue"
import LauncherIcon from "../launcher/LauncherIcon.vue"
import PopoverMenu from "./components/PopoverMenu.vue"
import LauncherPopoverMenu from "@/components/desktop/launcher/LauncherPopoverMenu.vue"

const { placement, autoHide, popoverPlacement, bodyLeave, show, isShowDockBody } = useDockStyle()

const dockApplications = useDockApplications()

defineProps({
  switchLauncher: {
    type: Function,
    required: false
  },
  closeLauncher: {
    type: Function,
    required: false
  }
})
</script>

<style scoped lang="scss">
$size: var(--dock-size);
$bodySize: calc(var(--dock-size) - 0.05rem);
$bodyRadius: calc(var(--dock-size) * 0.25);

.dock {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  .dock-body {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 2px 0 rgba(50, 50, 50, 0.37);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: $bodyRadius;
    border: 1px solid rgba(255, 255, 255, 0.18);

    .app-item {
      margin: calc($size * 0.1);
      transition: all 0.3s ease;

      .app-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .application-icon {
          --application-icon-size: calc(var(--dock-size) * 0.6);
        }

        .active-drop {
          width: 0.04rem;
          height: 0.04rem;
          border-radius: 50%;
        }

        .active-drop-show {
          background-color: #333;
        }
      }
    }

    .app-item:hover {
      scale: 1.1;
    }
  }
}

.dock-bottom {
  height: $size;
  width: 100%;
  bottom: 0;

  .dock-body {
    height: $bodySize;
    top: 0;
    padding: 0.05rem 0.05rem 0.02rem 0.05rem;

    .app-item {
      .app-icon-wrapper {
        flex-direction: column;
        height: $bodySize;
      }
    }

    .app-item:hover {
      transform: translateY(calc(0rem - $size * 0.05));
    }
  }
}

.dock-left,
.dock-right {
  height: 100%;
  width: $size;

  .dock-body {
    flex-direction: column;
    width: $bodySize;

    .app-item {
      .app-icon-wrapper {
        width: $bodySize;
      }
    }
  }
}

.dock-left {
  left: 0;

  .dock-body {
    right: 0;
    padding: 0.05rem 0.05rem 0.05rem 0.02rem;

    .app-item:hover {
      transform: translateX(calc($size * 0.05));
    }
  }
}

.dock-right {
  right: 0;

  .dock-body {
    left: 0;
    padding: 0.05rem 0.02rem 0.05rem 0.05rem;

    .app-item:hover {
      transform: translateX(calc(0rem - $size * 0.05));
    }
  }
}

//自动隐藏时出场和退场过渡动画
.bottom-enter-from,
.bottom-leave-to {
  transform: translateY($size);
}

.left-enter-from,
.left-leave-to {
  transform: translateX(calc(0rem - $size));
}

.right-enter-from,
.right-leave-to {
  transform: translateX($size);
}

.bottom-enter-active,
.bottom-leave-active,
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  transition: all 0.3s ease;
}
</style>
